<template>
  <div class="detail">
    <div class="media">
       <div class="box"><video class="video" src="../assets/00.mp4"  controls></video></div>
       <div class="info">
         <div class="title">
           <p>误吸仙气的马乐被告知世界正在崩溃边缘 界正在崩正在崩溃边缘 界正在溃边缘…</p>
           <span class="s">★</span>
         </div>
         <div class="tip">
          <p><i></i>大胖孟园胖孟园<router-link tag="span" :to="{path:'', query:{ attend: 1 }}"><em>+</em>关注</router-link></p>
          <p><i></i>551次</p>
          <p><i></i>2天前</p>
        </div>
        <div class="intr">号称“自杀干预大师”的心理医生马乐，专靠别人生活的不如意发财，一日天降“寿星”砸中了马</div>
       </div>
    </div>
    <div class="other">
      <h2>相关影片</h2>
       <!-- list -->
      <small-list :conList = "conList" />
    </div>
  </div>
</template>

<script>
import { Loadmore } from 'mint-ui'
import SmallList from '@/components/SmallList'
let conList = [
  {
    vid: 0,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '001误吸仙气的马乐被告知世界正在崩溃边缘…'
  },
  {
    vid: 1,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '误220吸仙气的马乐被告知世界正在崩溃边缘…'
  },
  {
    vid: 2,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '误吸仙222气的马乐被告知世界正在崩溃边缘…'
  }
]
export default {
  name: 'find',
  data () {
    return {
      conList
    }
  },
  created () {
    console.log(this.$route.params.vid)
  },
  watch: {
    $route () {
      // console.log(this.$route.params.vid)
    }
  },
  methods: {
  },
  components: {
    mtLoadmore: Loadmore,
    SmallList
  }
}
</script>
<style lang="less">
  .detail {
    .media {
      .box {
         height: 255px; background: #000; overflow: hidden; text-align: center;
         video { height: 100%; display: inline-block;}
      }
      .info {
        padding: 10px;
        .title {
          display: flex; justify-content: space-between; align-items: center;
          p { width:90%; font-size:16px;}
          span { width: 26px; height: 26px; color: #39314A; font-size:24px; line-height: 1em;}
          span.s {  color: #FF9405;}
        }
        .tip {
          display: flex; justify-content: space-between; line-height: 2.4em; overflow: hidden;
          p {
            i { display: inline-block; width: 16px; height: 16px; margin-right: 3px; position:relative; top:2px; }
          }
          p:nth-child(1) {
            width: 60%; overflow: hidden;text-overflow:ellipsis; white-space: nowrap;
            i {  background: url(../assets/up.png) no-repeat; background-size:100% 100%; }
            span {
              background: #FF9405; color: #fff; font-size:12px; border-radius: 3px; padding: 2px 5px; margin-left:3px;
              em { font-weight: bold; font-style: normal; font-size: 16px;}
            }
          }
          p:nth-child(2) {
            color:#938e9d;
            i { background: url(../assets/num.png) no-repeat;background-size:100% 100%; }
          }
          p:nth-child(3) {
            color:#938e9d;
            i { background: url(../assets/time.png) no-repeat;background-size:100% 100%; }
          }
        }
        .intr { background: #FAF9FB; padding: 15px; border-radius: 10px; margin: 5px 0; color: #938E9D; font-size: 14px;}
      }
    }
    .other {
      padding:0 10px;
      h2 { font-size: 16px; margin-bottom:10px; font-weight: bold;}
      .smallList {
        display: flex; flex-wrap: wrap; justify-content: space-between;
        li { width: 49.2%;}
      }
    }
  }
</style>
